{% extends "base.html" %}

{% block custom_title %}
    {{ title }}
{% endblock custom_title %}

{% block site_content %}
<section id="dashboard" class="section">
    <div class="container">
        <h3 class="mt-0 primary-text-color">Dashboard</h3>
        
        <div class="row arena py-4">
            <div class="col col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
                <div class="card no-shadow">
                    <button id="create-new-entry" data-toggle="modal" data-target="#upload-img-modal">
                        <div>
                            <i class="fa fa-plus"></i>
                            <h5 class="mb-0 secondary-text-color">Create New</h5>
                        </div>
                    </button>
                </div>
            </div>
            
            {% for ready_item in ready_set %}
                <div class="col col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
                    <div class="card">
                        <div class="ready-entry row h-100">
                            <h2 class="d-none title">{{ ready_item.title }}</h2>
                            <div class="col col-8 pr-0 h-100">
                                <img class="w-100 h-100 final" src="{{ ready_item.result_url }}" alt="1" />
                            </div>
                            <div class="col col-4 pl-0 h-100">
                                <div class="row h-100">
                                    <div class="col col-12">
                                        <img class="w-100 h-100 content" src="{{ ready_item.content_url }}" alt="1" />
                                    </div>
                                    <div class="col col-12">
                                        <img class="w-100 h-100 style" src="{{ ready_item.style_url }}" alt="1" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    
                    </div>
                </div>
            {% endfor %}
            
            <!--div class="col col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
                <div class="card">
                    <div id="" class="ready-entry row h-100">
                        <h2 class="d-none title">Colloseum Entry</h2>
                        <div class="col col-8 pr-0">
                            <img class="w-100 h-100 final" src="/static/img/preview/colloseum.jpg" alt="1" />
                        </div>
                        <div class="col col-4 pl-0">
                            <div class="row h-100">
                                <div class="col col-12">
                                    <img class="w-100 h-100 content" src="/static/img/preview/colloseum.jpg" alt="1" />
                                </div>
                                <div class="col col-12">
                                    <img class="w-100 h-100 style" src="/static/img/preview/colloseum.jpg" alt="1" />
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="col col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
                <div class="card">
                    <div id="" class="ready-entry row h-100">
                        <h2 class="d-none title">Rain Princess Entry</h2>
                        <div class="col col-8 pr-0">
                            <img class="w-100 h-100 final" src="/static/img/preview/rainPrincess.jpg" alt="1" />
                        </div>
                        <div class="col col-4 pl-0">
                            <div class="row h-100">
                                <div class="col col-12">
                                    <img class="w-100 h-100 content" src="/static/img/preview/rainPrincess.jpg" alt="1" />
                                </div>
                                <div class="col col-12">
                                    <img class="w-100 h-100 style" src="/static/img/preview/rainPrincess.jpg" alt="1" />
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div-->
          
          {% for infant_item in infant_set %}
            <div class="col col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
                <div class="card no-shadow">
                    <div id="{{ infant_item.token }}" class="infant-entry">
                        <i class="fa fa-hourglass"></i>
                        <h5 class="mb-0 secondary-text-color">Please wait: 
                            <span class="time-left"></span>s
                        </h5>
                    </div>
                    <div class="ready-entry d-none row h-100 w-100">
                        <h2 class="d-none title"></h2>
                        <div class="col col-8 pr-0">
                            <img class="w-100 h-100 final" src="" alt="1" />
                        </div>
                        <div class="col col-4 pl-0">
                            <div class="row h-100">
                                <div class="col col-12">
                                    <img class="w-100 h-100 content" src="" alt="1" />
                                </div>
                                <div class="col col-12">
                                    <img class="w-100 h-100 style" src="" alt="1" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          {% endfor %}
          
        </div>
    </div>

    <div id="upload-img-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-img-modal-title" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="upload-img-modal-title">Upload Images for Style Transfer</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form class="modal-body mb-0" method="post" action="" enctype="multipart/form-data">
                    {% csrf_token %}
                    <ul class="nav nav-pills nav-pills-primary" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#set-title" role="tablist" aria-expanded="false">
                                Title
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#upload-content-img" role="tablist" aria-expanded="true">
                                Content
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#upload-style-img" role="tablist" aria-expanded="false">
                                Style
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content tab-space pb-1">
                        <div class="tab-pane active" id="set-title" aria-expanded="true">
                            <h5 class="secondary-text-color">What do you want your design to be called?</h5>
                            <div class="form-group">
                                <label for="design-title">Design Title</label>
                                <input type="text" class="form-control" name="design-title" id="design-title" placeholder="Write something here...">
                            </div>
                        </div>
                        <div class="tab-pane" id="upload-content-img" aria-expanded="false">
                            <div class="row">
                                <!--div class="col col-12">
                                    <div class="img-list light-primary-color">
                                        <input type="radio" name='c-img' id="c-img-1" value="1"/>
                                        <label for="c-img-1">
                                            <img class="img-item" src="/static/img/colloseum.jpg" alt=""/>
                                        </label> 
                                        
                                        <input type="radio" name='c-img' id="c-img-2" value="2"/>
                                        <label for="c-img-2">
                                            <img class="img-item" src="/static/img/colloseum.jpg" alt=""/>
                                        </label> 
                                        
                                        <input type="radio" name='c-img' id="c-img-3" value="3"/>
                                        <label for="c-img-3">
                                            <img class="img-item" src="/static/img/colloseum.jpg" alt=""/>
                                        </label> 
                                        
                                        <input type="radio" name='c-img' id="c-img-4" value="4"/>
                                        <label for="c-img-4">
                                            <img class="img-item" src="/static/img/colloseum.jpg" alt=""/>
                                        </label> 
                                    </div>
                                </div>
                                <div class="col col-12">
                                    <div class="text-center my-2">
                                        <div class="align-self-center">OR</div>
                                    </div>
                                </div-->
                                <div class="col col-12">
                                    <div class="input-group file-upload-field">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">Upload</span>
                                        </div>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="content-upload" name="content-upload">
                                            <label class="custom-file-label truncate" for="content-upload">
                                                Choose file
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="upload-style-img" aria-expanded="false">
                            <div class="row">
                                <!--div class="col col-12">
                                    <div class="img-list light-primary-color">
                                        <input type="radio" name='s-img' id="s-img-1"/>
                                        <label for="s-img-1">
                                            <img class="img-item" src="/static/img/rainPrincess.jpg" alt=""/>
                                        </label> 
                                        
                                        <input type="radio" name='s-img' id="s-img-2"/>
                                        <label for="s-img-2">
                                            <img class="img-item" src="/static/img/rainPrincess.jpg" alt=""/>
                                        </label> 
                                        
                                        <input type="radio" name='s-img' id="s-img-3"/>
                                        <label for="s-img-3">
                                            <img class="img-item" src="/static/img/rainPrincess.jpg" alt=""/>
                                        </label> 
                                        
                                        <input type="radio" name='s-img' id="s-img-4"/>
                                        <label for="s-img-4">
                                            <img class="img-item" src="/static/img/rainPrincess.jpg" alt=""/>
                                        </label> 
                                    </div>
                                </div>
                                <div class="col col-12">
                                    <div class="text-center my-2">
                                        <div class="align-self-center">OR</div>
                                    </div>
                                </div-->
                                <div class="col col-12">
                                    <div class="input-group file-upload-field">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">Upload</span>
                                        </div>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="style-upload" name="style-upload">
                                            <label class="custom-file-label truncate" for="style-upload">
                                                Choose file
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div> 
                        </div>
                    </div>
                </form>
                
                <div class="alert alert-danger d-none">
                    <div class="alert-icon">
                        <i class="fa fa-exclamation-triangle"></i>
                    </div>
                    <p class="mb-0 alert-text"></p>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary mr-3 close-btn" data-dismiss="modal">Close</button>
                    <button type="button" class="btn default-primary-color submit-btn">Upload Files</button>
                </div>
            </div>
        </div>
    </div>
    
    <div id="showcase-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="showcase-modal-title" aria-hidden="true">
         <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col col-12 mb-3">
                            <h5 class="primary-text-color text-center">Result</h5>
                            
                            <img class="result-img w-100" src="" alt="" />
                        </div>
                        <div class="col col-6">
                            <h5 class="primary-text-color text-center">Content</h5>
                            
                            <img class="content-img w-100" src="" alt="" />
                        </div>
                        <div class="col col-6">
                            <h5 class="primary-text-color text-center">Style</h5>
                            
                            <img class="style-img w-100" src="" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock site_content %}
